<template>
  <div class="root">
    <el-card shadow="never">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="auto"
      >
        <el-form-item label="商品名称">
          <el-input
            v-model="formInline.productName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="" class="newFormItem">
          <div class="btnBoxs">
            <div class="resetBtn" @click="chongzhi">
              <i class="el-icon-refresh-right"></i>
              重置
            </div>
            <div class="queryBtn" @click="selectAllByProductName">
              <i class="el-icon-search"></i>
              搜索
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px">
      <div class="tableBox">
        <el-table
          :data="tableData"
          header-cell-class-name="tableHeader"
          style="width: 100%"
          height="58vh"
        >
          <el-table-column prop="date" label="商品信息" width="370">
            <template slot-scope="scope">
              <div class="shopsData" @click="$router.push({
                path:'/detail',
                query:{
                  id:scope.row.productId
                }
              })">
                <img
                  :src="scope.row.productPic"
                  class="newImg"
                  alt=""
                />
                <div class="shopsDataBox">
                  <div class="nameBox">{{ scope.row.productName }}</div>
                  <div class="Model">货号： {{ scope.row.productCode }}</div>
                  <div class="newBtn" v-if="scope.row.status">档口在售</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="storeName" label="店铺名"> </el-table-column>
          <el-table-column prop="productPrice" label="价格"> </el-table-column>

          <!-- <el-table-column prop="zt" label="供应商"> </el-table-column> -->
          <el-table-column prop="collectionTime" label="收藏时间">
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <div class="scBtn" @click="deleteProductCollection(scope.row.productId)">取消收藏</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagingBox">
        <PaginationView :total="total" @change="getPage"></PaginationView>
      </div>
    </el-card>
  </div>
</template>
  
  <script>
import {
  selectAllByProductName,
  deleteProductCollection,
} from "@/api/MyCollection";
export default {
  data() {
    return {
      formInline: {
        pageNumber: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [
        {
          price: "￥23元",
          shopName: "吉吉兔",
          zt: "小豆町",
          time: "2023-08-03 16:57:10",
        },
        {
          price: "￥23元",
          shopName: "吉吉兔",
          zt: "小豆町",
          time: "2023-08-03 16:57:10",
        },
      ],
    };
  },
  created() {
    this.selectAllByProductName();
  },
  methods: {
    getPage(val) {
      this.formInline.pageNumber = val.currentPage;
      this.formInline.pageSize = val.limit;
      this.selectAllByProductName();
    },
    //重置
    chongzhi(){
      this.formInline={
        pageNumber: 1,
        pageSize: 10,
        productName:''
      }
      this.selectAllByProductName();
    },
    //取消收藏
    deleteProductCollection(id) {
      deleteProductCollection({
        idList: `${id}`,
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "取消成功",
            type: "success",
          });
          this.selectAllByProductName();
        }
      });
    },
    //获取商品收藏列表
    selectAllByProductName() {
      selectAllByProductName(this.formInline).then((data) => {
        this.tableData = data.data.records;
        this.total = data.data.total;
      });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.root {
  font-size: 12px;
  /deep/ .el-tabs__item.is-active {
    color: #e22a1f;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e22a1f;
  }
  /deep/ .el-tabs__item:hover {
    color: #e22a1f;
  }
  /deep/ .el-input__inner {
    border: none;
    background-color: #f5f7f9;
  }
  /deep/ .el-range-input {
    background-color: #f5f7f9;
  }
  /deep/ .el-form-item {
    background: #f5f7f9;
    padding: 0 10px;
    border-radius: 2px;
    margin-right: 40px;
    width: 23%;
  }
  /deep/ .newFormItem {
    background: #fff;
    width: 10%;
    margin-right: 0;
    .el-form-item__content {
      width: 100%;
    }
  }
  .btnBoxs {
    display: flex;
    justify-content: center;
    cursor: pointer;
    .resetBtn {
      width: 5vw;
      border-radius: 2px;
      text-align: center;
      color: #666;
      font-size: 0.7vw;
      background-color: #f5f7f9;
    }
    .queryBtn {
      border-radius: 2px;
      text-align: center;
      width: 5vw;
      color: #fff;
      font-size: 0.7vw;
      background: #e22a1f;
      margin-left: 20px;
    }
  }
  /deep/ .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
  /deep/ .el-input__suffix {
    right: -60px;
  }
  .tableBox {
    /deep/ .tableHeader {
      background: #ebeff5;
      font-weight: 400;
      color: #000;
    }
    .shopsData {
      display: flex;
      cursor:pointer;
      .newImg {
        width: 80px;
        height: 80px;
        border-radius: 10px;
      }
      .shopsDataBox {
        margin-left: 10px;
        .nameBox {
          font-size: 14px;
        }
        .Model {
          color: #999999;
          margin-top: 8px;
          font-size: 12px;
        }
        .newBtn {
          width: 0.7rem;
          height: 0.25rem;
          text-align: center;
          line-height: 0.25rem;
          border: 1px solid #e22a1f;
          color: #e22a1f;
          font-size: 0.1rem;
          border-radius: 4px;
          margin-top: 0.05rem;
          cursor: pointer;
        }
      }
    }
    .scBtn {
      width: 0.7rem;
      height: 0.25rem;
      text-align: center;
      line-height: 0.25rem;
      border: 1px solid #e22a1f;
      color: #e22a1f;
      font-size: 0.1rem;
      border-radius: 20px;
      margin-top: 0.05rem;
      cursor: pointer;
    }
  }
  .pagingBox {
    display: flex;
    justify-content: center;
  }
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .newBtn {
    width: 1.5rem !important;
  }
  .scBtn {
    width: 1.2rem !important;
  }
  /deep/ .el-form-item__content {
    width: 57%;
  }
  .root {
    font-size: 12px;
    /deep/ .el-tabs__item.is-active {
      color: #e22a1f;
    }
    /deep/ .el-tabs__active-bar {
      background-color: #e22a1f;
    }
    /deep/ .el-tabs__item:hover {
      color: #e22a1f;
    }
    /deep/ .el-input__inner {
      border: none;
      background-color: #f5f7f9;
    }
    /deep/ .el-range-input {
      background-color: #f5f7f9;
    }
    /deep/ .el-form-item {
      background: #f5f7f9;
      padding: 0 10px;
      border-radius: 2px;
      margin-right: 40px;
      width: 19%;
    }
    /deep/ .newFormItem {
      background: #fff;
      width: 30%;
      margin-right: 0;
    }
    /deep/ .timeBox {
      width: 40%;
    }
    .btnBoxs {
      display: flex;
      justify-content: center;
      cursor: pointer;
      .resetBtn {
        width: 5vw;
        border-radius: 2px;
        text-align: center;
        color: #666;
        font-size: 0.7vw;
        background-color: #f5f7f9;
      }
      .queryBtn {
        border-radius: 2px;
        text-align: center;
        width: 5vw;
        color: #fff;
        font-size: 0.7vw;
        background: #e22a1f;
        margin-left: 20px;
      }
    }
    /deep/ .el-date-editor--daterange.el-input__inner {
      width: 250px;
    }
    /deep/ .el-input__suffix {
      right: -10px;
    }
    .tableBox {
      /deep/ .tableHeader {
        background: #ebeff5;
        font-weight: 400;
        color: #000;
      }
      .shopsData {
        display: flex;
        .newImg {
          width: 80px;
          height: 80px;
          border-radius: 10px;
        }
        .shopsDataBox {
          margin-left: 10px;
          .nameBox {
            font-size: 14px;
          }
          .Model {
            color: #999999;
            margin-top: 8px;
            font-size: 12px;
          }
        }
      }
      .lvBox {
        color: #07c160;
      }
      .hongBox {
        color: #e22a1f;
      }
    }
    .pagingBox {
      display: flex;
      justify-content: center;
    }
  }
}
</style>